<!doctype html>
<html>
<head>
<title>射击</title>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
	<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script>
	window.onload=function(){
		var canvas=document.getElementById('canvas');
		var hua=canvas.getContext('2d');
		
		var daodan=buju(9,100)
		
		document.onclick=function(eve){
			var e=eve||window.event;
			var heig=e.clientY+document.body.scrollTop;
			
			for(var i=0;i<daodan.length;i++){
				if(daodan[i][1].x>e.clientX&&
				daodan[i][1].x-20<e.clientX&&
				daodan[i][1].y<heig&&
				daodan[i][1].y+70>heig
				){
					break;
					}
				}
				var j=0;
				var t=0;
				var timer=setInterval(function(){
					hua.clearRect(daodan[i][4].x-1,daodan[i][0].y+j-150,22,150);
					hua.beginPath();
					hua.strokeStyle='red';
					hua.moveTo(daodan[i][0].x,daodan[i][0].y+j-150);
					for(var k=1;k<=5;k++){
						
						hua.lineTo(daodan[i][k%5].x,daodan[i][k%5].y+j-150)
						}
						t--;
						j=-5*t*t/10;
					hua.stroke();
					hua.closePath();
					},10)
				
			}
		 this.x=0;
		 this.timer2=setInterval(function(){
			hua.clearRect(this.x-1,400,30,30);
			 hua.beginPath();
			 hua.fillStyle='black';
			 hua.fillRect(this.x,400,30,30);
			 hua.closePath();
			 
			  this.x++;
			  
			  if(this.x==1001){
				  this.x=0;
				  }
			 },10)
		function buju(m,n){
			var daodan=[];
			for(var i=0;i<m;i++){
				daodan[i]=[];
				
				for(var j=0;j<5;j++){
					daodan[i][j]={};
					}
				daodan[i][0].x=(i+1)*n;
				daodan[i][0].y=900;
				
				daodan[i][1].x=daodan[i][0].x+10;
				daodan[i][1].y=daodan[i][0].y+30;
				
				daodan[i][2].x=daodan[i][1].x
				daodan[i][2].y=daodan[i][1].y+70;
				
				daodan[i][3].x=daodan[i][2].x-20;
				daodan[i][3].y=daodan[i][2].y
				
				daodan[i][4].x=daodan[i][3].x
				daodan[i][4].y=daodan[i][1].y
				
				hua.beginPath();
				hua.strokeStyle='red';
				hua.moveTo(daodan[i][0].x,daodan[i][0].y);
				for(var k=1;k<=5;k++){
					
					hua.lineTo(daodan[i][k%5].x,daodan[i][k%5].y)
					}
				hua.stroke();
				hua.closePath();
				
				}
			return daodan;
			}
		}
</script>
</html>